<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--数据绑定常用形式：{{xxx}}-->

<vue-det>

    <!--数据绑定-->
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <!--函数返回值绑定-->
    <h1>{{details()}}</h1>

</vue-det>
<div id="yanzheng">准备验证数据绑定</div>
<script type="text/javascript">

    var data = {
        site: "菜鸟教程",
        url: "www.runoob.com",
        alexa: "10000"
    }
    var vm = new Vue({
        el: 'vue-det',//element缩写。是css选择器。id、class
        data: data,
        methods: {
            details: function () {
                //js关于this的定义：this始终指向其所在函数被调用时所属的对象。
                //methods中的方法始终由vue实例调用,所以this始终指向vue实例，并能访问到data中的数据
                return this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })


    setTimeout(function () {


//    data中的数据，实际上被绑定到Vue实例的属性上。
//    验证：
        var yz = document.getElementById("yanzheng");
        yz.innerText = "data的数据绑定到vue实例上？"+(vm.site === data.site)+"" // true
        // 设置属性也会影响到原始数据。vue双向绑定的原理就是监听属性的变化
        vm.site = "Runoob"
        yz.innerHTML += "<p>vue属性上的数据和data上数据是同一对象，值的改变当然是同时的："+ data.site+ "</p>"

    }, 2000)
</script>
</body>
</html>